<template>
  <main>
    <header>
      <h2>实现 确认提示框 方法</h2>
    </header>
    <section>
      <p><strong>实现以下效果和逻辑：</strong></p>
      <p>提供 myConfirm 方法, 该方法有三个参数，分别是 提示文本、回调、配置参数，配置参数只用实现 cancelText 和 confirmText 即可。</p>
      <p>调用后弹出提示文本，提供确定和取消按钮（按钮文字可以通过配置参数进行修改），点击不同按钮后关闭提示文本，并触发相应的回调函数，回调的参数为true / false，对应确认和取消操作。</false></p>
      <p>注意事项：可以使用已掌握的任何技术，保持思路清晰和代码风格一致。最好能提供渐变动画。</p>
      <p>使用案例：</p>
      <article>
        <p>
          <button @click="myConfirm01">提交</button>
          <pre>
myConfirm('确定提交确定提交确定提交确定提交确定提交确定提交确定提交确定提交确定提交？', function (isConfirm) {
  if (isConfirm) {
    console.log('已提交')
  }
})
          </pre>
        </p>
        <p>
          <button @click="myConfirm02">删除数据</button>
          <pre>
myConfirm('确定删除该数据？', function (isConfirm) {
  if (isConfirm) {
    console.log('开始删除该数据')
  } else {
    console.log('取消了删除')
  }
}, {
  cancelText: '还是不删除了',
  confirmText: '坚持删除'
})
          </pre>
        </p>
      </article>
    </section>

  </main>
</template>

<script>
import myConfirm from './myConfirm'
export default {
  methods: {
    myConfirm02 () {
      myConfirm('确定删除该数据？', function (isConfirm) {
      if (isConfirm) {
        console.log('开始删除该数据')
      } else {
        console.log('取消了删除')
      }
      }, {
        cancelText: '不删除了',
        confirmText: '坚持删除'
      })
    },
    myConfirm01 () {
      myConfirm('确定提交确定提交确定提交确定提交确定提交确定提交确定提交确定提交确定提交？', function (isConfirm) {
        if (isConfirm) {
          console.log('已提交')
        }
      })
    }
  }
}
</script>


<style scoped>
section {
  flex: auto;
  padding: 0 8vw;
  text-align: left;
}
article {
  margin-top: 80px;
}

button {
  font-size: 15px;
  background-color: #25a5e0;
  color: #fff;
  border: none;
  padding: 8px 10px;
  text-align: center;
  min-width: 5em;
  cursor: pointer;
}
</style>

